// pages/canvas/canvas.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  canvas:null,
  ctx:null,
  initFlag:false,
  image:null,
  editor:null,

  randColor() {
    let r = parseInt(Math.random()*255);
    let g = parseInt(Math.random()*255);
    let b = parseInt(Math.random()*255);

    return `rgb(${r},${g},${b})`;
  },

  // randColor() {
  //   let random = ()=> {
  //     return (parseInt(Math.random()*120)+135).toString(16);
  //   }

  //   return `rgb(${random()},${random()},${random()})`;
  // },

  makeImage() {
    for(let i=0;i<10;i++) {
      this.ctx.fillStyle = this.randColor();
      this.ctx.fillRect(Math.random()*100,Math.random()*100,Math.random()*100,Math.random()*100);
    }
    
  },

  colorAnimation() {
    let paint = () => {
      this.ctx.fillStyle = this.randColor();
      this.ctx.fillRect(0,0,this.canvas.width,this.canvas.height);

      let x = parseInt(Math.random()*this.canvas.width);
      let y = parseInt(Math.random()*this.canvas.height);

      this.ctx.drawImage(this.image,x,y);
      this.canvas.requestAnimationFrame(paint);
    }
    paint();
  },

  initCanvas() {
    const query = wx.createSelectorQuery();
    if(this.initFlag) {
      return new Promise((rv)=>{
        rv({
          canvas:this.canvas,
          ctx:this.ctx
        })
      })
    }
    this.initFlag = true;
    
    return new Promise((rv,rj)=>{
      query.select('#mycanvas')
      .fields({ node: true, size: true })
      .exec((res) => {
        this.canvas = res[0].node;
        this.ctx = this.canvas.getContext("2d");

        //调整画布宽高
        // this.canvas.width = res[0].width;
        // this.canvas.height = res[0].height;

        this.canvas.width = 100;
        this.canvas.height = 100;

        rv({
          canvas:this.canvas,
          ctx:this.ctx
        })
      })
    })
    
  },

  initEditor() {
    let query = wx.createSelectorQuery();
    return new Promise((rv,rj)=>{
      query.select("#editor").context(res=>{
        this.editor = res.context;
        rv(this.editor)
      }).exec()
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    this.initCanvas();
    this.initEditor();
  },

  /**
   * 生命周期函数--监听页面显示
   */
  async onShow() {
    if(!this.editor) {
      this.initEditor();
    }

    if(!this.canvas) {
      await this.initCanvas();
    }

    //生成随机图片
    this.makeImage();
    
    // await new Promise((rv,rj)=>{
    //   let img = this.canvas.createImage();
    //   img.onload = ()=>{
    //     this.ctx.drawImage(img,0,0,100,100)
    //     rv(img)
    //   }
    //   img.src = "/images/icon/大象.png"
    // })

    // wx.canvasToTempFilePath({
    //   canvas: this.canvas,
    //   success: res=>{
    //     this.editor.insertImage({
    //       src:res.tempFilePath
    //     })
    //   }
    // })

    // let img = this.canvas.createImage();
    // await new Promise((rv,rj)=>{
    //   img.onload = ()=>{
    //     this.image = img;
    //     rv(img);
    //   }
    //   img.src = "/images/icon/马.png";
    // })

    // this.colorAnimation();

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})